<template>
	<view class="pageBox">
		<!--朋友圈列表 准备套接口-->
		
		<view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
			<view
				class="cu-bar fixed bg-bgcolor"
				:style="{
					height: $wanlshop.wanlsys().height + 'px',
					paddingTop: $wanlshop.wanlsys().top + 'px',
					backgroundColor: common.appStyle.cart_nav_color ? common.appStyle.cart_nav_color : '#f7f7f7',
					backgroundImage: 'url(' + $wanlshop.oss( common.appStyle.cart_nav_image, 0, 50, 1, 'transparent', 'png' ) + ')',
					color: common.appStyle.cart_font_color == 'light' ? '#ffffff' : '#333333'
				}"
			>
			
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></text>
				</view>
			
				<view class="content" :style="{ top: $wanlshop.wanlsys().top + 'px' }">
					朋友圈
				</view>
				
				<view class="right">
					<image src="/static/images/add.png" class="search-icon" @click="$wanlshop.auth('/pages/new/find/add')"></image>
				</view>
			</view>
		</view>
		
				
		<scroll-view
		
			class="find-list" 
			scroll-y 
			enable-back-to-top
			enable-flex="true"
			@scrolltoupper="handleUpper" 
			@scrolltolower="handleLower"
		>
			<view class="bg-white margin-top-sm margin-lr-bj radius-bock padding-lr-bj padding-top-bj"
			 v-for="(find, index) in dataList" :key="index">
				<view class="flex align-center">
					<image :src="find.avatar" class="avatar"></image>
					
					<view class="flex flex-direction">
						<text class="nickname text-cut">{{find.nickname || ''}}</text>
						<text class="date">{{timeToDate(find.createtime) || ''}}</text>
					</view>
				</view>
			 
				 <!-- 详细 -->
				 <view class="find-list-item-content margin-tb-bj" 
				  style="display: flex;width: 100%;height: auto;">
				  
					<view class="text-df text-gray-dark">
						<view v-html="find.content"></view>
					</view>
				 </view>
			 
				<!-- 图片类型 -->
				<view class="overflow-hidden flex flex-wrap radius-bock" :style="{width: width + 'px'}">
					<!-- 单个排序 -->
					<view class="find-list-item-container-item"
						v-if="find.images.length == 1"
						:style="{
							width: `${width * 0.66}px`
						}"
						@tap="previewImage(find.images, 0)">
						<image class="radius-bock" lazy-load :src="find.images[0]" :style="{ width: `${width * 0.66}px` }" mode="aspectFill"/>
					</view>
					
					<!-- 三个排序 -->
					<view class="flex justify-between" 
						v-else-if="find.images.length == 3"
						:style="{ width: width + 'px' }" >
						<view 
							class="live-cover align-center justify-center position-relative overflow-hidden flex-twice margin-right-s"
							@tap="previewImage(find.images, 0)"
						>
							<!-- #ifdef APP-PLUS -->
							<image :style="{ width: width * 0.666 + 'px' }" lazy-load :src="find.images[0]" mode="aspectFill"/>
							<!-- #endif -->
							
							<!-- #ifndef APP-PLUS -->
							<image lazy-load :src="find.images[0]" mode="aspectFill"/>
							<!-- #endif -->
						</view>
						
						<view class="flex flex-sub flex-direction" style="width: 0;">
							<view 
								class="live-goods-item" 
								style="margin-bottom: 4rpx;" 
								@tap="previewImage(find.images, 1)">
								
								<!-- #ifdef APP-PLUS -->
								<image :style="{ width: width * 0.333 + 'px'}" lazy-load :src="find.images[1]" mode="widthFix" />
								<!-- #endif -->
								
								<!-- #ifndef APP-PLUS -->
								<image lazy-load :src="find.images[1]" mode="aspectFill" />
								<!-- #endif -->
							</view>
							
							<view 
								class="live-goods-item" 
								@tap="previewImage(find.images, 2)">
								<!-- #ifdef APP-PLUS -->
								<image :style="{ width: width * 0.333 + 'px'}" lazy-load :src="find.images[2]" mode="widthFix" />
								<!-- #endif -->
								
								<!-- #ifndef APP-PLUS -->
								<image lazy-load :src="find.images[2]" mode="aspectFill" />
								<!-- #endif -->
							</view>
						</view>
					</view>
					
					<!-- 基数排序 -->
					<view class="find-list-item-container-item"
						v-else-if="(find.images.length % 2) == 1"
						v-for="(img, kes) in find.images" 
						:key="kes"
						@tap="previewImage(find.images, kes)"
						:style="{
							width: `${(width - 6) / 3}px`,
							height: `${(width - 6) / 3}px`
						}">
						<!-- #ifdef APP-PLUS -->
						<image :style="{ width: `${(width - 6) / 3}px` }" lazy-load :src="img" mode="widthFix" />
						<!-- #endif -->
						<!-- #ifndef APP-PLUS -->
						<image lazy-load :src="img" mode="aspectFill" />
						<!-- #endif -->
					</view>
					
					<!-- 偶数排序 -->
					<view class="" 	v-else>
						<view class="find-list-item-container-item"
						
							v-for="(img, kes) in find.images"
							:key="kes"
							@tap="previewImage(find.images, kes)"
							:style="{
								width: `${(width - 4) / 2}px`,
								height: `${(width - 4) / 2}px`
							}">
							<!-- #ifdef APP-PLUS -->
							<image :style="{ width: `${(width - 4) / 2}px` }" lazy-load :src="img" mode="aspectFill" />
							<!-- #endif -->
							
							<!-- #ifndef APP-PLUS -->
							<image lazy-load :src="img" mode="aspectFill" />
							<!-- #endif -->
						</view>
					</view>
				
				</view>
				
				<!-- 底部操作 -->
				<view class="padding-tb-bj flex justify-between align-center">
					<view class="find-list-item-foot-read">
						<!-- <text class="text-gray text-sm">1 阅读</text> -->
					</view>
					<view class="find-list-item-foot-fabulous flex align-center">
						<view class="flex align-center" @tap="handleLike(index)">
							<image src="/static/images/like.png" v-if="!find.is_praise"  class="margin-right-xs comment"></image>
							<image src="/static/images/like_active.png" v-if="find.is_praise" class="margin-right-xs comment"></image>
							<text class="text-sm" :class="[find.is_praise ? 'text-orange' : 'text-gray']">{{find.praisenum || 0}}</text>
						</view>
						<view class="flex align-center margin-left-bj" 
						@tap="handleFind(find, 'comments')">
							<image src="/static/images/comment.png" class="margin-right-xs comment"></image>
							<text class="text-sm text-gray">{{find.commentnum || 0}}</text>
						</view>
						
						<view class="flex align-center margin-left-bj" v-if="find.is_del"
						@tap="handleDelete(index)">
							<image src="/static/images/delete.png" class="margin-right-xs comment"></image>
						</view>
					</view>
				</view>
			 
			</view>
		
		</scroll-view>
		
		<!-- 更多 -->
		<uni-load-more :status="status" :content-text="contentText" />
		
	</view>
</template>

<script>
import { mapState, mapActions } from 'vuex';
export default {
	components: {
		
	},
	data() {
		return {
			width:0,
			dataList:[
				// {
				// 	content:'xxxxxx',
				// 	nickname:'昵称',
				// 	id:10,
				// 	avatar:'/static/images/default/screen_icon_new.png',
				// 	createtime:1700660395,
				// 	images:[
				// 		'/static/images/default/screen_icon_new.png',
				// 	],
				// 	commentnum:0,
				// 	praisenum:10,
				// 	is_praise:true,
				// 	is_del:true,
				// }
			],
			current_page: 1, //当前页码
			last_page: 1, //总页码
			status: 'noMore',//noMore loading
			contentText: {
				contentdown: '',
				contentrefresh: '正在加载...',
				contentnomore: ''
			}
		}
	},
	onLoad() {
		const sys = uni.getSystemInfoSync();
		this.width = sys.windowWidth - 48;
		this.getList();
	},
	onShow(){

	},
	// 触底加载更多
	onReachBottom() {
		//判断是否最后一页
		if (this.current_page >= this.last_page) {
			this.status = 'noMore';
		} else {
			this.current_page = this.current_page + 1; //页码+1
			this.status = 'loading';
			this.getList();
		}
	},
	computed: {
		...mapState(['common'])
	},
	methods: {
		getList() {
			let that = this;
		
			this.status = 'loading';
			uni.request({
				url: '/friendscircle/circlelist',
				data: {
					page: this.current_page,
				},
				success: res => {
					res = res.res;
					if (res.code === 1) {
						that.dataList = [...that.dataList, ...res.data.data];
						that.current_page = res.data.current_page; //当前页码
						that.last_page = res.data.last_page; //总页码
						that.status = 'more';
					}
				}
			});
		},
		handleUpper() {
			this.loadData('upper');
		},
		handleLower() {
			this.loadData('lower');
		},
		//预览图片
		previewImage(image, index) {
			uni.previewImage({
				urls: image,
				current: image[index],
				indicator: 'number'
			});
		},
		// 喜欢 & 取消喜欢
		async handleLike(index) {
			
			if (this.$store.state.user.isLogin) {
				let data = this.dataList[index];
				
				uni.request({
					url: '/friendscircle/circlepraise',
					data: {
						id: data.id
					},
					success: res => {
						res = res.res;
						if (res.code === 1) {
							if(res.msg === '点赞成功'){
								data.praisenum += 1;
							}else{
								data.praisenum = data.praisenum - 1 < 0 ? 0 : data.praisenum - 1;
							}
							
							data.is_praise = res.msg === '点赞成功' ? true : false;
						}
					}
				});
				
			} else {
				this.$wanlshop.to('/pages/user/auth/auth');
			}
		},
		
		//删除
		handleDelete(index){
			if (this.$store.state.user.isLogin) {
				let data = this.dataList[index];
				
				uni.showModal({
					content: "确认删除？",
					confirmText: '确认',
					success: (res)=> {
						if (res.confirm) {
							
							uni.request({
								url: '/friendscircle/circledel',
								data: {
									id: data.id
								},
								success: res => {
									res = res.res;
									if (res.code === 1) {
										this.dataList.splice(index, 1);
									}
								}
							});
						}
					}
				});
				
			} else {
				this.$wanlshop.to('/pages/user/auth/auth');
			}
		},
		handleFind(data, comments = null){
			if(comments){
				uni.navigateTo({
					url: `/pages/new/find/detail?id=${data.id}&afferent=comments`
				})
			}
		},
		timeToDate(timestamp){
			//if (timestamp == null) timestamp = Number(new Date());
			timestamp = new Date(timestamp).getTime()
			
			timestamp = parseInt(timestamp);
			// 判断用户输入的时间戳是秒还是毫秒,一般前端js获取的时间戳是毫秒(13位),后端传过来的为秒(10位)
			if (timestamp.toString().length == 10) timestamp *= 1000;
			var timer = (new Date()).getTime() - timestamp;
			timer = parseInt(timer / 1000);
			// 如果小于5分钟,则返回"刚刚",其他以此类推
			let tips = '';
			switch (true) {
				case timer < 300:
					tips = '刚刚';
					break;
				case timer >= 300 && timer < 3600:
					tips = parseInt(timer / 60) + '分钟前';
					break;
				case timer >= 3600 && timer < 86400:
					tips = parseInt(timer / 3600) + '小时前';
					break;
				case timer >= 86400 && timer < 2592000:
					tips = parseInt(timer / 86400) + '天前';
					break;
				default:
					var date = new Date(timestamp);
					var year = date.getFullYear(); 
					var month = date.getMonth()+1 < 10 ?  '0'+(date.getMonth()+1) : (date.getMonth()+1); 
					var date = date.getDate() < 10 ?  '0'+(date.getDate()) : (date.getDate());
					tips = `${year}-${month}-${date}`
			}
			return tips;
		}
	}
}
</script>



<style scoped lang="scss">
.search-icon{
	width: 48rpx;
	height: 48rpx;
	margin-right: 34rpx;
	
	/*#ifdef MP*/
	margin-right: 10rpx !important;
	/*#endif*/
}

.avatar{
	height: 68rpx;
	width: 68rpx;
	border-radius: 50%;
	margin-right: 20rpx;
	flex-shrink: 0;
}

.nickname{
	color: #666666;
	font-size: 28rpx;
	width: 500rpx;
}

.date{
	color: #999999;
	font-size: 22rpx;
}


.radius-bock {
    border-radius: 9px;
    overflow: hidden;
}

.margin-lr-bj {
    margin-left: 26rpx;
    margin-right: 26rpx;
}

.margin-tb-bj{
	margin-top: 26rpx;
	margin-bottom: 26rpx;
}

.padding-lr-bj {
    padding-left: 26rpx;
    padding-right: 26rpx;
}

.padding-tb-bj{
	padding-top: 26rpx;
	padding-bottom: 26rpx;
}

.find-list-item-container-item {
    margin: 1px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #f9f9f9;
}
.live-cover {
    background-color: #f9f9f9;
    height: 428rpx;
}
.overflow-hidden {
    overflow: hidden;
}

.flex-sub{
    flex: 1;
}

.live-goods-item{
    background-color: #f9f9f9;
    height: 212rpx;
    overflow: hidden;
}

.margin-right-s{
    margin-right: 4rpx;
}

.margin-left-bj{
	margin-left: 26rpx;
}

.margin-right-xs{
    margin-right: 10rpx;
}

.padding-top-bj{
	padding-top: 26rpx;
}

.right{
	position: absolute;
	right: 0px;
}
.comment{
	width: 30rpx;
	height: 30rpx;
}
</style>